

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath("Ext", "/libs/extjs4/src");
Ext.Loader.setPath("Ext.ux", "/libs/extjs4/examples/ux");

Ext.require(["Ext.form.*",
             "Ext.grid.*",
             "Ext.tree.*",
             "Ext.data.*",
             "Ext.util.*",
             "Ext.loader.*",
             "Ext.state.*",
             "Ext.layout.container.Column",
             'Ext.dd.*'
	     		
		   ]);

Ext.application({
    name: 'temp',

//    appFolder: 'testapp',
    appFolder: 'app',
    
 //   controllers: ['tempcontroller'],

    launch: function() {
 
    	Ext.create('Ext.data.Store', {
		    storeId:'suggestedRoles',
		    fields:['name', 'id'],
		    data:{'items':[
		        { 'name': 'SROLE1', 'id': "1143kgdk34k34322342"},
		        { 'name': 'CROLE1', 'id': "43943843588"},
		        { 'name': 'FROLE1', 'id': "58454835348"}
		    ]},
		    proxy: {
		        type: 'memory',
		        reader: {
		            type: 'json',
		            root: 'items'
		        }
		    }
		});

        Ext.create('Ext.data.Store', {
            storeId:'availableRoles',
            fields:['name', 'id'],
            data:{'items':[
                { 'name': 'AROLE1', 'id': "1143kgdk34k34322342"},
                { 'name': 'AROLE3','id':  "0909009"},
                { 'name': 'AROLE2', 'id': "9098888"}
            ]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
        Ext.create('Ext.data.Store', {
            storeId:'selectedRoles',
            fields:['name', 'id'],
            data:{'items':[
                { 'name': 'S_DEVELOP', 'id': "1143kgdk34k34322342"},
                { 'name': 'FFROLE', 'id': "43943843588"},
                { 'name': 'ADMIN', 'id': "58454835348"}
            ]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
    	Ext.define('DataObject', {
    	    extend: 'Ext.data.Model',
    	    fields: ['name', 'column1', 'column2']
    	});
    	Ext.create('Ext.data.Store', {
    	    model: 'DataObject',
    	    storeId : 'secondStore'
    	});
    	
        

    	Ext.create('Ext.container.Viewport', {
            layout: 'vbox',
            id:'viewport',
            items: [{
           		xtype : 'panel',
           		flex : 1,
           		id:'mypanel',
			    region: 'west',
//			    title: 'West',
			    split: true,
			   width: '97%',
			   margin : '20 20 20 0',
			   // height : '40%',
			    minSize: 175,
			    //maxSize: 400,
			    collapsible: true,
			    titleCollapse: true,
			    margins: '0 0 0 5',
			    layout: {
			         type: 'column'
			    },
			    items: [
			    {	
			    
			    	xtype : 'panel',
			    	id:'fixpanel',
			    	title : 'fix panel',
			    	height : '100%',
			    	margin : '20 0 0 0',
//			    	width:'100%',
			    	layout : {
			    		type : 'column',
			    		align : 'stretch'
			    	},
			    	columnWidth : 1,
			    	items : [{
                        xtype:'grid',
                        tbar : [
                                {
                            xtype: 'button',
                            text : 'add roles',
                            listeners: {
                                'click' : function() {
                                    
                                    var slidingPanel = Ext.getCmp('slidingPanel');
                                    if(!(slidingPanel.isVisible())) {
                                        
                                        slidingPanel.setVisible(true);
                                        slidingPanel.el.slideIn('r');
//                                      slidingPanel.toBack();
                                    }
//                                  slidingPanel.doLayout();
//                                  myPanel.setWidth('40%');
//                                  myPanel.setHeight('90%');
                                    // myPanel.el.switchOff({
                                    // callback : function() {
                                        //  mypanel.show();
                                            //myPanel.el.slideIn.defer(2500, myPanel.el, []);
                                    // }
                                //  });
                                }
                            }
                        },
                        {
                            xtype: 'button',
                            margin : '0,0,10,0',
                            text : 'hide role panel',
                            listeners: {
                                'click' : function() {
                                    
                        
                                    var myPanel = Ext.getCmp('slidingPanel');
                                    
                                    if((myPanel.isVisible())) {
                                        myPanel.el.slideOut('r', {
                                            callback : function(){
                                                
                                                var sp = Ext.getCmp('slidingPanel');
                                                sp.setVisible(false);
                                                var fixp = Ext.getCmp('fixpanel');
                                                fixp.ownerCt.ownerCt.doLayout(false);
                                            }
                                        });
                                    }
                                }
                            }
                        }
                        ],
                        viewConfig: {
                            plugins: {
                                ptype: 'gridviewdragdrop',
                                dragGroup: 'secondGridDDGroup',
                                dropGroup: 'firstGridDDGroup'
                            },
                            listeners: {
                                drop: function(node, data, dropRec, dropPosition) {
                                    var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                                    Ext.Msg.alert('Drag from left to right', 'Dropped ' + data.records[0].get('name') + dropOn);
//                                    Ext.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
                                }
                            }
                        },
//                      height:'100%',
//                      width:'100%',
                        columnWidth : 1,
                        store: Ext.data.StoreManager.lookup('secondStore'),
                        columns: [
                            { header: 'Name',  dataIndex: 'name' },
                            { header: 'Email', dataIndex: 'column1', flex: 1 },
                            { header: 'Phone', dataIndex: 'column2' }
                        ],
                        height: 200,
                        width: 400,
                        stripeRows       : true,
                    }
                   
			    ]
			    }
			    ,{
			    
			    	xtype : 'panel',
			    	id : 'slidingPanel',
			    	title : 'Roles',
			        margin : '20 0 0 0',
//			    	height : '100%',
//			    	width :  '40%',
//			        width: 400,
//			        height: 500,
			    	items : [ {
			    		xtype:'grid',
			    		title: 'Suggested roles',
			    		 collapsible: true,
			            columnLines: true,
//			    		height:'100%',
			    		width:'100%',
		                   viewConfig: {
		                        plugins: {
		                            ptype: 'gridviewdragdrop',
		                            dragGroup: 'firstGridDDGroup',
		                            dropGroup: 'secondGridDDGroup'
		                        }
		                    ,
		                        listeners: {
		                            drop: function(node, data, dropRec, dropPosition) {
		                                var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
		                                Ext.Msg.alert('Drag from right to left', 'Dropped ' + data.records[0].get('name') + dropOn);
//		                                Ext.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
		                            }
		                        }
		                    },
			    		store: Ext.data.StoreManager.lookup('suggestedRoles'),
					    columns: [
					        { header: 'Role Name',  dataIndex: 'name' },
					        { header: 'Role Id', dataIndex: 'id', flex: 1 }
					    ],
					    height: 200
//					    width: 400
			    	},{
                        xtype:'grid',
                        title: 'Available roles',
                        collapsible: true,
                        columnLines: true,
//                      height:'100%',
                      width:'100%',
                           viewConfig: {
                                plugins: {
                                    ptype: 'gridviewdragdrop',
                                    dragGroup: 'firstGridDDGroup',
                                    dropGroup: 'secondGridDDGroup'
                                }
                            ,
                                listeners: {
                                    drop: function(node, data, dropRec, dropPosition) {
                                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                                        Ext.Msg.alert('Drag from right to left', 'Dropped ' + data.records[0].get('name') + dropOn);
//                                      Ext.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
                                    }
                                }
                            },
                        store: Ext.data.StoreManager.lookup('availableRoles'),
                        columns: [
                                  { header: 'Role Name',  dataIndex: 'name' },
                                  { header: 'Role Id', dataIndex: 'id', flex: 1 }
                              ],
                        height: 200
 //                       width: 400
                    },{
                        xtype:'grid',
                        title: 'Selected roles',
//                        columnLines: true,
                        collapsible: true,
//                      height:'100%',
                      width:'100%',
                           viewConfig: {
                                plugins: {
                                    ptype: 'gridviewdragdrop',
                                    dragGroup: 'firstGridDDGroup',
                                    dropGroup: 'secondGridDDGroup'
                                },
                                stripeRows: true
                    
                            ,
                                listeners: {
                                    drop: function(node, data, dropRec, dropPosition) {
                                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                                        Ext.Msg.alert('Drag from right to left', 'Dropped ' + data.records[0].get('name') + dropOn);
//                                      Ext.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
                                    }
                                }
                            },
                            store: Ext.data.StoreManager.lookup('selectedRoles'),
                            columns: [
                                      { header: 'Role Name',  dataIndex: 'name' },
                                      { header: 'Role Id', dataIndex: 'id', flex: 1 }
                                  ],
                        height: 200
//                        width: 400
                    }]
			    }
			    ]
			
        }]
        });
        
        Ext.getCmp('slidingPanel').setVisible(false);
        }
});